<template>
  <div class="app-container">
    <el-table ref="table" v-loading="listLoading" :data="list" border stripe style="width: 100%;" height="785" :default-sort="{prop: 'last_login_dt', order: 'descending'}">
      <el-table-column label="ID" prop="id" align="center" width="50%"></el-table-column>
      <el-table-column label="服务器" prop="sname" align="center"></el-table-column>
      <el-table-column label="角色ID" prop="actor_id" width="100px" align="center"></el-table-column>
      <el-table-column label="角色名" prop="actor_name" align="center"></el-table-column>
      <el-table-column label="等级" prop="level" sortable width="60px" align="center"></el-table-column>
      <el-table-column label="VIP" prop="vip" sortable width="50px" align="center"></el-table-column>
      <el-table-column label="真实充值" prop="real_amount" sortable width="80px" align="center"></el-table-column>
      <el-table-column label="总充值" prop="total_amount" sortable width="70px" align="center"></el-table-column>
      <el-table-column label="总战力" prop="power" sortable width="80px" align="center"></el-table-column>
      <el-table-column label="钻石数量" prop="diamond" sortable width="100px" align="center"></el-table-column>
      <el-table-column label="剩余秘券" prop="remainder_inner" sortable width="80px" align="center"></el-table-column>
      <el-table-column label="累计发放秘券" prop="grant_inner" sortable width="105px" align="center"></el-table-column>
      <el-table-column label="创角时间" prop="create_dt" sortable width="140px" align="center"></el-table-column>
      <el-table-column label="上次发放时间" prop="last_grant_dt" sortable width="140px" align="center"></el-table-column>
      <el-table-column label="最后登录时间" prop="last_login_dt" sortable width="140px" align="center"></el-table-column>
      <el-table-column label="未登录天数" prop="nologin_days" sortable width="90px" align="center"></el-table-column>
      <!--<el-table-column label="使用人" align="center" width="90%">
        <template slot-scope="{row}">
          {{row}}
        </template>
      </el-table-column>-->
      <el-table-column label="使用人" align="center" width="50%">
        <template slot-scope="{row}">
          {{ row.used_user }}
        </template>
      </el-table-column>
      <el-table-column label="自动发放" width="60px" align="center">
        <template slot-scope="{row}">
          <span v-if="row.auto_grant === 1">有</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column width="135px" align="center" label="操作" fixed="right">
        <template slot-scope="{row}">
          <el-button v-if="checkPermission(permissionRoles.inner_account_grant)" type="text" size="small" title="发放" @click="handleGrantAdd(row)">发放</el-button>
          <el-button v-if="checkPermission(permissionRoles.inner_account_ban_actor)" type="text" size="small" title="封角色" @click="handleBan(row)">封角色</el-button>
          <el-button v-if="checkPermission(permissionRoles.inner_account_grant_auto)" type="text" size="small" title="自动" @click="handleAdd(row)">自动</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog :visible.sync="dialogVisible" title="添加任务" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="dataForm" label-width="100px" label-position="left">
        <el-form-item label="服务器">{{ sname }}</el-form-item>
        <el-form-item label="角色ID">{{ dataForm.actor_id }}</el-form-item>
        <el-form-item label="代币类型" prop="recharge_mode">
          <el-select v-model="dataForm.recharge_mode" class="defaut-input">
            <el-option label="限时秘券" value="1" />
            <el-option label="秘券" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发放数量" prop="grant_num">
          <el-input v-model="dataForm.grant_num" class="defaut-input" placeholder="填写发放内币数量" />
        </el-form-item>
        <el-form-item label="发放时间" prop="grant_dt">
          <el-date-picker v-model="dataForm.grant_dt" type="datetime" style="width: 50%" />
        </el-form-item>
        <el-form-item label="间隔时间" prop="interval">
          <el-input v-model="dataForm.interval" class="defaut-input" placeholder="填写间隔时间 单位：天" />
        </el-form-item>
        <el-form-item label="发放条件">
          <el-input v-model="dataForm.remainder_inner" class="text30" placeholder="填写剩余内币" />
          <el-input v-model="dataForm.remainder_gold" class="text30" placeholder="填写剩余钻石" />
        </el-form-item>
        <el-form-item label="停止条件">
          <el-input v-model="dataForm.no_login_days" class="text30" placeholder="填写未登录天数 单位：天" />
          <el-input v-model="dataForm.jump_times" class="text30" placeholder="填写跳过次数" />
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="grantDialogVisible" title="添加资源发放" :close-on-click-modal="false">
      <el-form ref="grantDataForm" :model="grantDataForm" label-width="100px" label-position="left">
        <el-form-item label="服务器">{{ sname }}</el-form-item>
        <el-form-item label="角色ID">{{ grantDataForm.actor_id }}</el-form-item>
        <el-form-item label="角色名">{{ grantDataForm.actor_name }}</el-form-item>
        <el-form-item label="VIP等级">{{ grantDataForm.vip }}</el-form-item>
        <el-form-item label="上次发放时间">{{ grant.last_date }}</el-form-item>
        <el-form-item label="上次发放数量">{{ grant.last_num }}</el-form-item>
        <el-form-item label="使用人">{{ grantDataForm.used_user }}</el-form-item>
        <el-form-item label="代币类型" prop="recharge_mode">
          <el-select v-model="grantDataForm.recharge_mode" class="defaut-input">
            <el-option label="限时秘券" value="1" />
            <el-option label="秘券" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="内币数量" prop="used_num">
          <el-input v-model="grantDataForm.used_num" class="defaut-input" placeholder="请输入内币数量" />
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="grantDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="grantConfirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="banDialogVisible" title="封禁角色" :close-on-click-modal="false">
      <el-form ref="banDataForm" :model="banDataForm" label-width="100px" label-position="left">
        <el-form-item label="封禁目标">{{ banDataForm.target }}</el-form-item>
        <el-form-item label="封禁时间" prop="bantime">
          <el-input v-model="banDataForm.bantime" class="defaut-input" placeholder="填写封禁时间*分钟" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="banDataForm.remark" class="defaut-input" placeholder="备注" />
        </el-form-item>
        <el-form-item label="清除发言" prop="clearChat">
          <el-radio v-model="banDataForm.clearChat" label="1">是</el-radio>
          <el-radio v-model="banDataForm.clearChat" label="0">否</el-radio>
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="banDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="banConfirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import checkPermission from '@/utils/permission'
import { getInnerAccountList } from '@/api/operator'
import { handleGrantJob, handleGrant } from '@/api/operator'
import { ban } from '@/api/chat'

const defaultItem = {
  id: '',
  sid: '',
  actor_id: '',
  actor: [],
  recharge_mode: '',
  grant_num: '',
  grant_dt: new Date(),
  interval: '',
  remainder_inner: '',
  remainder_gold: '',
  no_login_days: '',
  jump_times: '',
  used_user: ''
}
const defaultGrantItem = {
  id: '',
  sid: '',
  actor_id: '',
  actor_name: '',
  vip: '',
  recharge_mode: '1',
  recharge_id: '',
  used_num: '',
  used_user: '',
  app_type: ''
}
const defaultBanItem = {
  id: '',
  type: '3',
  sid: '',
  target: '',
  bantime: '',
  clearChat: '0'
}
export default {
  name: 'InnerAccount',
  components: { Pagination },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      dataForm: Object.assign({}, defaultItem),
      grantDataForm: Object.assign({}, defaultGrantItem),
      banDataForm: Object.assign({}, defaultBanItem),
      list: [],
      total: 0,
      sname: '',
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 500
      },
      grant: {
        last_date: '',
        last_num: ''
      },
      dialogVisible: false,
      grantDialogVisible: false,
      banDialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    checkPermission,
    async getList() {
      const query = this.listQuery
      this.listLoading = true
      const res = await getInnerAccountList(query)
      this.listLoading = false
      this.list = res.data.items
      this.total = res.data.total
    },
    handleAdd(row) {
      this.dataForm.actor = []
      this.dataForm = Object.assign({}, defaultItem)
      this.dataForm.sid = row.sid
      this.sname = row.sname
      this.dataForm.actor_id = row.actor_id
      this.dataForm.actor.push(row)
      this.dataForm.used_user = row.used_user
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    confirmSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleGrantJob(this.dataForm).then(response => {
            if (response.status) {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    },
    handleGrantAdd(row) {
      this.grantDataForm = Object.assign({}, defaultGrantItem)
      this.grantDataForm.sid = row.sid
      this.sname = row.sname
      this.grantDataForm.actor_id = row.actor_id
      this.grantDataForm.actor_name = row.actor_name
      this.grantDataForm.vip = row.vip
      this.grantDataForm.recharge_mode = row.recharge_mode
      this.grantDataForm.used_user = row.used_user
      this.grant.last_date = row.last_grant_dt
      this.grant.last_num = row.last_grant_num
      this.grantDialogVisible = true
      this.$nextTick(() => {
        this.$refs['grantDataForm'].clearValidate()
      })
    },
    grantConfirmSubmit() {
      this.$refs['grantDataForm'].validate((valid) => {
        if (valid) {
          handleGrant(this.grantDataForm).then(response => {
            if (response.status) {
              this.grantDialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    },
    banConfirmSubmit() {
      this.$refs['banDataForm'].validate((valid) => {
        if (valid) {
          // this.buttonDisabled = true
          ban(this.banDataForm).then(response => {
            if (response.status) {
              // this.buttonDisabled = false
              this.banDialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    },
    handleBan(row) {
      this.banDataForm = Object.assign({}, defaultBanItem)
      this.banDataForm.sid = row.sid
      this.banDataForm.target = row.actor_id
      this.banDialogVisible = true
      this.$nextTick(() => {
        this.$refs['banDataForm'].clearValidate()
      })
    }
  }
}

</script>
